为什么当我更改第二个时，第一个 CSS 变量会重置？自定义颜色主题

Question

目的是制作自定义网站颜色主题。问题是当我更改第二个 CSS 变量时首先重置为其默认值。

var mainColor = document.getElementById("main-color");
var secondColor = document.getElementById("second-color");

function color(cssVariable, inputValue) {
  return cssVariable + ":" + inputValue
}

mainColor.addEventListener('input', function() {
  document.documentElement.setAttribute("style", color("--main-color", this.value))
})

secondColor.addEventListener('input', function() {
  document.documentElement.setAttribute("style", color("--second-color", this.value))
})

:root {
  --main-color: black;
  --second-color: whitesmoke;
  --main-font-size: 16px;
  color: var(--main-color);
  font-size: var(--main-font-size);
}

<div class="dropdown-color-container">
  <input type="color" id="main-color">
  <input type="color" id="second-color">
</div>

有什么方法可以保存更改的 CSS 变量吗？您将如何为此实现代码，最简单的解决方案是什么？ 我是 JS 初学者

可运行代码：https://www.w3schools.com/code/tryit.asp?filename=GLDQWOUT9HUA

Answer 1

问题是您正在设置样式属性，所以每次您都会覆盖所有以前的内联样式。

您需要使用 setProperty

以不同的方式进行操作

var mainColor = document.getElementById("main-color");
var secondColor = document.getElementById("second-color");

function color(cssVariable, inputValue) {
  return cssVariable + ":" + inputValue
}

mainColor.addEventListener('input', function() {
  document.documentElement.style.setProperty("--main-color", this.value);
})

secondColor.addEventListener('input', function() {
  document.documentElement.style.setProperty("--second-color", this.value)
})

:root {
  --main-color: black;
  --second-color: whitesmoke;
  --main-font-size: 16px;
  color: var(--main-color);
  font-size: var(--main-font-size);
}

<div class="dropdown-color-container">
  <input type="color" id="main-color">
  <input type="color" id="second-color">
</div>

Answer 2

更改此行
document.documentElement.setAttribute("style", color("--main-color", this.value));

到

document.documentElement.style.setProperty("--main-color", this.value);

参考：

演示：jsFiddle

为什么当我更改第二个时，第一个 CSS 变量会重置？自定义颜色主题

Why first CSS variable resets when I change second? Custom color theme

html

javascript

css

setattribute

css-variables